<template>
	<view class="warp">
		<u-toast ref="uToast"></u-toast>
		<u-row gutter="20">
			<u-col span="3" offset="0">
					<text>手机号: </text>
					
			</u-col>
			<u-col span="7" offset="-1">
				<u--input
				    placeholder="请输入手机号"
				    border="surround"
				    v-model="phone"
					style="display: inline-block;padding-left: 10rpx;margin-left: 30rpx;"
				  ></u--input>
			</u-col>
			<u-col span="4" offset="-1">
				<u-toast ref="uToast"></u-toast>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-code>
						<u-button @tap="getCode" type="primary" style="margin-left: 30rpx;">{{tips}}</u-button>
				<!-- <u-button type="primary" :plain="true" :hairline="true" text="发送验证码" style="margin-left: 20rpx;"></u-button> -->
			</u-col>
		</u-row>
		
		<u-row gutter="20" style="margin-top: 20rpx;">
			<u-col span="3" offset="0">
					<text>验证码: </text>
					
			</u-col>
			<u-col span="10" offset="-1">
				<u--input
				type="number"
				    placeholder="请输入验证码"
				    border="surround"
				    v-model="value"
					style="display: inline-block;padding-left: 10rpx;margin-left: 30rpx;"
				  ></u--input>
			</u-col>
		</u-row>
		<u-row style="margin-top: 10rpx;" gutte='10'>
			<u-col>
				<u-checkbox-group v-model="checked" @change="checkboxChange">
					<u-checkbox  activeColor="green" label="同意王氏条款" :name="item"></u-checkbox>
				</u-checkbox-group>
			</u-col>
		</u-row>
		<u-row style="margin-top: 35rpx;" gutte="10">
			<u-col span="5" offset="4">
				<u-button type="success" shape="circle" text="登录" @click="login"></u-button>
			</u-col>
			
		</u-row>
	</view>
</template>

<script>
	export default{
		name:"myLogin",
		data(){
			return {
				value: '',
				phone:"19157736525",
				tips: '',
				checked:[],
				// refCode: null,
				seconds: 60,
				item:'hhh',
			}
		},
		methods:{
			login(){
				console.log(uni.$u.test.mobile(this.phone))
				console.log(this.value)
				console.log(this.checked.length)
				if(uni.$u.test.mobile(this.phone) && this.value !== "" && this.checked[0] === "hhh"){
					uni.request({
						url:"/api/member/login.do",
						data:{
							phone:this.phone,
							code:this.value
						},
						header:{
							"content-type":"application/json"
						},
						method:"POST",
						success: (res) => {
							uni.$u.toast(res.data.message)
							uni.setStorageSync("userInfo",res.data.data)
							console.log(res.data.data)
							uni.redirectTo({
								url:"/pages/index/index"
							})
						}
					})
					
					return
				}else{
					uni.$u.toast('表单校验失败')
					// console.log("手机号错误")
				}
			},
			checkboxChange(n){
				console.log('change', n);
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(uni.$u.test.mobile(this.phone)){
					if(this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						// console.log(this.model1.userInfo.phone)
						uni.request({
							url:"/api/validateCode/sendForLogin.do",
							data:{
								telephone:this.phone
							},
							method:"GET",
							success:(res)=> {
								console.log(res.data)
							}
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
							}, 2000);
						} else {
						uni.$u.toast('倒计时结束后再发送');
						}
				}else{
					uni.$u.toast('手机号错误')
				}
				},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		
		}
	}
</script>

<style>
	.warp{
		padding: 40rpx;
	}
</style>